<template>
  <VPage class="app-container">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <el-select class="!w-[150px]" v-model="form.source" placeholder="来源">
          <el-option
            v-for="item in options['base.BaseImgDownloadTask']?.[0].sourceText"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select class="!w-[150px]" v-model="form.status" placeholder="状态">
          <el-option
            v-for="item in options['base.BaseImgDownloadTask']?.[0].statusText"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <select-personnel
          v-model="form.create_user"
          placeholder="发起人"
        ></select-personnel>
        <VGroup>
          <el-select class="selectClass !w-[120px]" v-model="form.skuRange.type">
            <el-option
              v-for="item in skuOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <multi-input
            v-model="form.skuRange.value"
            placeholder="请输入"
            class="w-50"
          ></multi-input>
        </VGroup>
      </template>
      <template #toolbar_btns> </template>
    </VTable>
  </VPage>
</template>
<script setup lang="jsx" name="BasicsImage-download">
import { ElMessage } from "element-plus";
import { getImgDownloadTask, ImgDownloadTaskRerun } from "./api";
import { getOptions } from "@/api/index.js";

const tableRef = ref();
const skuOption = [
  { label: "系统SKU", value: "sku" },
  // { label: "赛盒SKU", value: "sai_he_sku" },
];

// 枚举类
let options = ref([]);
const fetchOption = () => {
  getOptions({
    name: ["base.BaseImgDownloadTask"],
  }).then((res) => {
    options.value = res.data;
  });
};

onMounted(() => {
  fetchOption();
});

const tableOptins = reactive({
  formConfig: {
    data: {
      skuRange: { type: "sku", value: [], range: false },
    },
  },
  rowConfig: {
    height: 52,
  },
  columns: [
    { field: "source_text", title: "来源", width: 100 },
    {
      field: "skus",
      title: "SKU",
      slots: {
        default: ({ row }) => {
          const sku = row.skus
            .map((i) => {
              return i.sku;
            })
            .toString();
          return (
            <div>
              <el-tooltip class="item" effect="dark" content={sku || ""} placement="top">
                <div class="overflow-line2" style="width: 200px">
                  {sku}
                </div>
              </el-tooltip>
            </div>
          );
        },
      },
    },
    // {
    //   field: "retry_times",
    //   title: "赛盒SKU",
    //   slots: {
    //     default: ({ row }) => {
    //       const sai_he_sku = row.skus
    //         .map((i) => {
    //           return i.sai_he_sku;
    //         })
    //         .toString();
    //       return <div>{sai_he_sku}</div>;
    //     },
    //   },
    // },
    { field: "status_text", title: "状态", width: 100 },
    { field: "failure_reason", title: "失败原因" },
    { field: "create_username", title: "发起人", width: 160 },
    { field: "execution_time", title: "执行时间", width: 180 },
    { field: "create_time", title: "创建时间", width: 180 },
    {
      title: "操作",
      fixed: "right",
      width: 80,
      slots: {
        default: ({ row }) => {
          return (
            <div class="flex">
              {row.status == 2 && (
                <a class="base-text-color" target="_blank" href={row.file_url}>
                  下载
                </a>
              )}
              {row.status == 3 && (
                <el-button link type="primary" onClick={() => handleRetry(row.id)}>
                  重新执行
                </el-button>
              )}
            </div>
          );
        },
      },
    },
  ],

  proxyConfig: {
    props: {
      result: "data",
      total: "total",
    },
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => getImgDownloadTask({ ...form, ...page }),
    },
  },
});

const query = () => {
  tableRef?.value.query();
};

// 重试
const handleRetry = async (id) => {
  try {
    const res = await ImgDownloadTaskRerun({ id });
    query();
    ElMessage.success(res.message);
  } catch (e) {
    throw Error(e);
  }
};
</script>
